<template>
  <div class="query">
    <div class="check">
      <div class="c_left">条件搜索栏</div>
      <div class="c_right" :style="style">
        <div class="clear">
          <div class="fl">
            <span class="c_tip">咨询对象</span>
            <el-input v-model="queryObj.ConsultationObject" clearable class="c_search" type="text" placeholder="咨询对象" />
            <i class="c_searchbtn" @click="selectPop('咨询对象')">选择</i>
          </div>
          <div class="fl">
            <span class="c_tip">填写人</span>
            <el-input v-model="queryObj.Inputuser" clearable class="text" type="text" placeholder="填写人" />
          </div>
          <div class="fl">
            <span class="c_long">具体问题/药师解答</span>
            <el-input v-model="queryObj.Problems" class="text" clearable type="text" placeholder="具体问题/药师解答" />
          </div>
        </div>
        <div class="clear">
          <div class="fl" style="display: flex;">
            <div class="c_center">咨询类别</div>
            <el-checkbox-group v-model="queryObj.ConsultationType" class="c_checkbox">
              <el-checkbox label="药理作用" />
              <el-checkbox label="药动学" />
              <el-checkbox label="药物选用" />
              <el-checkbox label="用法" />
              <el-checkbox label="用量" />
              <el-checkbox label="相互作用" />
              <el-checkbox label="配伍" />
              <el-checkbox label="不良反应" />
              <el-checkbox label="治疗方案" />
              <el-checkbox label="疗程" />
              <el-checkbox label="贮存" />
              <el-checkbox label="服药注意事项" />
              <el-checkbox label="联合用药" />
              <el-checkbox label="药品基本信息:名称、价格、剂量规格、供应情况" />
            </el-checkbox-group>
          </div>
        </div>
        <div class="sbtn_box">
          <el-button type="primary" class="btn_clear" @click="btnMedicationConsultationdata">查询</el-button>
          <el-button type="success" class="btn_clear" @click="showMedicationConsultation">新增</el-button>
          <el-button type="danger" class="btn_clear" @click="clearFun">重置</el-button></div>
        <div v-if="!sbtnFlag" class="show_btn" @click="showMore">
          <i class="el-icon-caret-bottom" />
          <span>显示更多</span>
        </div>
        <div v-if="sbtnFlag" class="show_btn" @click="showHide">
          <i class="el-icon-caret-top" />
          <span>收起</span>
        </div>
      </div>
    </div>
    <div class="list_tip clear" />
    <div class="wrapper">
      <Bluetable
        ref="blueTable"
        :t-head="MedicationConsultationListdataTitle"
        :t-data="MedicationConsultationListdata"
        @operateClick="operateClickMedicationConsultationdata"
      />
      <pagination
        :total="queryPage.total"
        :page.sync="queryPage.pagenum"
        :limit.sync="queryPage.pagesize"
        @pagination="pageMedicationConsultationdata"
      />
    </div>
    <Poptable
      ref="ptable"
      :p-type="pType"
      ctype="zy"
      @handleConsultationObject="handleConsultationObject"
      @handleDeptcode="handleDeptcode"
    />
    <!--    新增弹窗-->
    <el-dialog
      width="70%"
      title="新增用药咨询"
      :visible.sync="showMedicationConsultationDialog"
      @close="closeMedicationConsultation"
    >
      <el-form :model="medicationConsultationObj">
        <div style="display:flex">
          <el-form-item label="咨询时间" :label-width="formLabelWidth">
            <el-date-picker
              v-model="medicationConsultationObj.ConsultationDate"
              width="400px"
              type="datetime"
              placeholder="选择日期时间"
            />
          </el-form-item>
          <el-form-item label="咨询状态" :label-width="formLabelWidth">
            <el-select
              v-model="medicationConsultationObj.ConsultantStatus"
              filterable
              clearable
              placeholder="请选择"
              class="c_select"
            >
              <el-option
                v-for="item in ConsultantStatusList"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="科室" :label-width="formLabelWidth">
            <el-input v-model="medicationConsultationObj.ConsultantDept" clearable class="c_search" type="text" placeholder="科室" />
            <i class="dialog_searchbtn" @click="selectPop('科室')">选择</i>
          </el-form-item>
        </div>
        <div style="display:flex">
          <el-form-item label="身份" :label-width="formLabelWidth">
            <el-select
              v-model="medicationConsultationObj.ConsultantIdentity"
              filterable
              clearable
              placeholder="请选择"
              class="c_select"
            >
              <el-option
                v-for="item in ConsultantIdentityList"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="medicationConsultationObj.ConsultantName" clearable />
          </el-form-item>
          <el-form-item label="咨询对象" :label-width="formLabelWidth">
            <el-input v-model="medicationConsultationObj.ConsultationObject" clearable class="c_search" type="text" placeholder="咨询对象" />
            <i class="dialog_searchbtn" @click="selectPop('咨询对象')">选择</i>
          </el-form-item>
        </div>
        <el-form-item label="咨询类别" :label-width="formLabelWidth">
          <el-checkbox-group v-model="medicationConsultationObj.ConsultationType" class="c_checkbox">
            <el-checkbox label="药理作用" />
            <el-checkbox label="药动学" />
            <el-checkbox label="药物选用" />
            <el-checkbox label="用法" />
            <el-checkbox label="用量" />
            <el-checkbox label="相互作用" />
            <el-checkbox label="配伍" />
            <el-checkbox label="不良反应" />
            <el-checkbox label="治疗方案" />
            <el-checkbox label="疗程" />
            <el-checkbox label="贮存" />
            <el-checkbox label="服药注意事项" />
            <el-checkbox label="联合用药" />
            <el-checkbox label="药品基本信息:名称、价格、剂量规格、供应情况" />
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="具体问题" :label-width="formLabelWidth">
          <el-input v-model="medicationConsultationObj.ConcreteProblems" style="width:95%" type="textarea" />
        </el-form-item>
        <el-form-item label="药师解答" :label-width="formLabelWidth">
          <el-input v-model="medicationConsultationObj.PharmacistAnswers" style="width:95%" type="textarea" />
        </el-form-item>
        <el-form-item label="咨询结果" :label-width="formLabelWidth">
          <el-radio-group v-model="medicationConsultationObj.ConsultationResult">
            <el-radio :label="'采纳意见'" />
            <el-radio :label="'部分采纳'" />
            <el-radio :label="'不采纳'" />
            <el-radio :label="'未知'" />
          </el-radio-group>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="closeMedicationConsultation">取 消</el-button>
        <el-button type="primary" @click="saveMedicationConsultation">新增</el-button>
      </span>
    </el-dialog>

    <el-dialog
      width="70%"
      title="用药咨询信息"
      :visible.sync="changeMedicationConsultationObjDialog"
      @close="closeMedicationConsultation"
    >
      <el-form :model="changeMedicationConsultationObj">
        <el-form-item label="咨询时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="changeMedicationConsultationObj.consultationdate"
            width="400px"
            type="datetime"
            placeholder="选择日期时间"
          />
        </el-form-item>

        <el-form-item label="咨询对象" :label-width="formLabelWidth">
          <el-input v-model="changeMedicationConsultationObj.drugname" style="width:95%" type="textarea" />
        </el-form-item>

        <el-form-item label="填写人" :label-width="formLabelWidth">
          <el-input v-model="changeMedicationConsultationObj.inputuser" style="width:95%" type="textarea" />
        </el-form-item>

        <el-form-item label="具体问题" :label-width="formLabelWidth">
          <el-input v-model="changeMedicationConsultationObj.concreteproblems" style="width:95%" type="textarea" />
        </el-form-item>

        <el-form-item label="药师解答" :label-width="formLabelWidth">
          <el-input v-model="changeMedicationConsultationObj.pharmacistanswers" style="width:95%" type="textarea" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeMedicationConsultation">取 消</el-button>
        <el-button v-if="optVal === '修改'" type="primary" @click="saveMedicationConsultationdata">修改</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getMedicationConsultationdata, saveMedicationConsultationdata } from '@/api/cpw'
import Poptable from '../components/poptable'
export default {
  name: 'MedicationConsultation',
  components: { Poptable },
  mounted() {
    let userInfo = localStorage.getItem("user");
    this.Username = JSON.parse(userInfo).real_name
    this.Userid = JSON.parse(userInfo).user_no
  },
  activated() {
    let userInfo = localStorage.getItem("user");
    this.Username = JSON.parse(userInfo).real_name
    this.Userid = JSON.parse(userInfo).user_no
  },
  data() {
    return {
      Userid: '',
      Username: '',
      // 查询条件
      queryObj: {
        ConsultationObject: '',
        Inputuser: '',
        Problems: '',
        ConsultationType: []
      },
      // 查询条件分页
      queryPage: {
        pagesize: 10,
        pagenum: 1,
        total: 0
      },
      // 表头
      MedicationConsultationListdataTitle: [
        {
          operate: ['查看', '修改', '删除'],
          label: '操作',
          link: true,
          width: '150px'
        }, {
          prop: 'consultationdate',
          label: '咨询时间'
        }, {
          prop: 'drugname',
          label: '咨询对象'
        }, {
          prop: 'inputuser',
          label: '填写人'
        }, {
          prop: 'concreteproblems',
          label: '具体问题'
        }, {
          prop: 'pharmacistanswers',
          label: '药师解答'
        }],
      // 分页数据
      MedicationConsultationListdata: [],
      // 用药咨询弹窗显示
      showMedicationConsultationDialog: false,
      changeMedicationConsultationObjDialog: false,
      // 弹窗数据对象
      medicationConsultationObj: {
        ConsultationDate: '',
        ConsultantStatus: '',
        ConsultantDept: '',
        ConsultantIdentity: '',
        ConsultantName: '',
        ConsultationObject: '',
        ConsultationType: [],
        ConcreteProblems: '',
        PharmacistAnswers: '',
        ConsultationResult: ''
      },
      // 查看你/修改/删除弹窗数据
      changeMedicationConsultationObj: {
        concreteproblems: '',
        consultationdate: '',
        drugname: '',
        inputuser: '',
        pharmacistanswers: ''
      },
      // 弹窗按钮操作
      optVal: '新增',
      // 行记录id
      rowId: '',
      // 咨询状态
      ConsultantStatusList: [
        {
          key: '1',
          value: '住院'
        }, {
          key: '2',
          value: '出院'
        }
      ],
      ConsultantIdentityList: [
        {
          key: '1',
          value: '医生'
        }, {
          key: '2',
          value: '护士'
        }, {
          key: '3',
          value: '药师'
        }, {
          key: '4',
          value: '患者'
        }
      ],
      // cc
      pType: '11',
      sbtnFlag: false,
      style: 'height: 60px;padding-top: 10px;',
      formLabelWidth: '120px'
    }
  },
  methods: {
    // 咨询对象
    handleConsultationObject(data) {
      var names = []; var codes = []
      for (var i = 0; i < data.length; i++) {
        names.push(data[i].drugname)
        codes.push(data[i].uniquecode)
      }
      if (this.showMedicationConsultationDialog) {
        this.medicationConsultationObj.ConsultationObject = names.join(',')
      } else {
        this.queryObj.ConsultationObject = names.join(',')
      }
    },
    // 科室
    handleDeptcode(data) {
      var names = []
      for (var i = 0; i < data.length; i++) {
        names.push(data[i].deptname)
      }
      this.medicationConsultationObj.ConsultantDept = names.join(',')
    },
    // 按钮查询
    btnMedicationConsultationdata() {
      this.queryPage = {
        pagesize: 10,
        pagenum: 1,
        total: 0
      }
      this.getMedicationConsultationdata()
    },
    // 分页查询
    pageMedicationConsultationdata(type) {
      this.queryPage.pagenum = type.page
      this.queryPage.pagesize = type.limit
      this.getMedicationConsultationdata()
    },
    // 获取分页数据
    async getMedicationConsultationdata() {
      this.MedicationConsultationListdata = []
      const tempJson = {
        ConsultationObject: this.queryObj.ConsultationObject,
        Inputuser: this.queryObj.Inputuser,
        Problems: this.queryObj.Problems,
        ConsultationType: this.queryObj.ConsultationType.join(',')
      }
      await getMedicationConsultationdata({
        pagesize: this.queryPage.pagesize,
        pagenum: this.queryPage.pagenum,
        json: tempJson
      }).then(res => {
        this.MedicationConsultationListdata = res.MedicationConsultationListdata
        this.queryPage.total = res.records
      }).catch(err => {
        console.log(err)
      })
    },

    // 显示弹窗
    showMedicationConsultation() {
      this.showMedicationConsultationDialog = true
    },
    // 关闭弹窗
    closeMedicationConsultation() {
      this.showMedicationConsultationDialog = false
      this.changeMedicationConsultationObjDialog = false
      this.medicationConsultationObj = {
        ConsultationDate: '',
        ConsultantStatus: '',
        ConsultantDept: '',
        ConsultantIdentity: '',
        ConsultantName: '',
        ConsultationObject: '',
        ConsultationType: [],
        ConcreteProblems: '',
        PharmacistAnswers: '',
        ConsultationResult: ''
      }
      this.changeMedicationConsultationObj = {
        concreteproblems: '',
        consultationdate: '',
        drugname: '',
        inputuser: '',
        pharmacistanswers: ''
      }
    },
    // 保存更新删除弹窗操作
    saveMedicationConsultation() {
      this.optVal = '新增'
      this.saveMedicationConsultationdata()
    },
    operateClickMedicationConsultationdata(val, row) {
      this.rowId = row.id
      this.changeMedicationConsultationObj.concreteproblems = row.concreteproblems
      this.changeMedicationConsultationObj.consultationdate = row.consultationdate
      this.changeMedicationConsultationObj.drugname = row.drugname
      this.changeMedicationConsultationObj.inputuser = row.inputuser
      this.changeMedicationConsultationObj.pharmacistanswers = row.pharmacistanswers
      if (val === '删除') {
        this.optVal = '删除'
        this.saveMedicationConsultationdata()
      } else if (val === '修改') {
        this.optVal = '修改'
        this.changeMedicationConsultationObjDialog = true
      } else if (val === '查看') {
        this.optVal = '查看'
        this.changeMedicationConsultationObjDialog = true
      }
    },
    // 弹窗接口
    async saveMedicationConsultationdata() {
      let tempJson = {}
      if (this.optVal === '新增') {
        tempJson = {
          Userid: this.Userid,
          Username: this.Username,
          ConsultationDate: this.medicationConsultationObj.ConsultationDate,
          ConsultantStatus: this.medicationConsultationObj.ConsultantStatus,
          ConsultantDept: this.medicationConsultationObj.ConsultantDept,
          ConsultantIdentity: this.medicationConsultationObj.ConsultantIdentity,
          ConsultantName: this.medicationConsultationObj.ConsultantName,
          ConsultationObject: this.medicationConsultationObj.ConsultationObject,
          ConsultationType: this.medicationConsultationObj.ConsultationType.join(','),
          ConcreteProblems: this.medicationConsultationObj.ConcreteProblems,
          PharmacistAnswers: this.medicationConsultationObj.PharmacistAnswers,
          ConsultationResult: this.medicationConsultationObj.ConsultationResult,
          Status: '1' }
      } else if (this.optVal === '删除') {
        tempJson = {
          Userid: this.Userid,
          Username: this.Username,
          Id: this.rowId,
          ConcreteProblems: this.changeMedicationConsultationObj.ConcreteProblems,
          ConsultationDate: this.changeMedicationConsultationObj.ConsultationDate,
          ConsultationObject: this.changeMedicationConsultationObj.ConsultationObject,
          PharmacistAnswers: this.changeMedicationConsultationObj.PharmacistAnswers,
          Status: '0' }
      } else if (this.optVal === '修改') {
        tempJson = {
          Userid: this.Userid,
          Username: this.Username,
          Id: this.rowId,
          ConcreteProblems: this.changeMedicationConsultationObj.concreteproblems,
          ConsultationDate: this.changeMedicationConsultationObj.consultationdate,
          ConsultationObject: this.changeMedicationConsultationObj.drugname,
          PharmacistAnswers: this.changeMedicationConsultationObj.pharmacistanswers,
          Status: '1' }
      }
      await saveMedicationConsultationdata({
        json: tempJson
      }).then(res => {
        if (res === '保存成功') {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
        }
        this.closeMedicationConsultation()
        this.getMedicationConsultationdata()
      }).catch(err => {
        console.log(err)
      })
    },
    selectPop(val) {
      this.$refs.ptable.show()
      this.pType = val
    },
    showMore() {
      this.sbtnFlag = true
      this.style = ''
    },
    showHide() {
      this.sbtnFlag = false
      this.style = 'height: 60px;padding-top: 10px;'
    },
    clearFun() {
      this.$refs.ptable.clearSelect()
      this.queryObj = {
        ConsultationObject: '',
        Inputuser: '',
        Problems: '',
        ConsultationType: []
      }
    }

  }
}
</script>

<style lang="scss" scoped="scoped">

  body{
    background:#e6edf5;
  }
  .wrapper{
    margin: 0 20px;
  }
  .query{
    width:100%;
    height:100%;
    background:#e6edf5;
    .check{
      font-size:12px;
      line-height:40px;
      background:#fff;
      text-align:center;
      .c_left{
        width:115px;
        float:left;
        line-height:65px;
      }
      .c_right{
        overflow:hidden;
        color:#636365;
        border-left:1px solid #e6edf5;
        padding:15px 0;
        position:relative;
        .show_btn{
          position:absolute;
          right:20px;
          bottom:15px;
          border:1px solid #e1e1e1;
          background:#f9fafc;
          border-radius:2px;
          text-align:center;
          line-height:32px;
          width:104px;
          height:32px;
          font-size:14px;
          color:#9f9f9f;
          cursor: pointer;
        }
        .fl{
          margin-bottom:10px;
        }
        .c_tip{
          display:inline-block;
          width:80px;
          padding-right:10px;
          text-align:right;
        }
        .c_center{
          width:100px;
          height: 90px;
          padding-right:10px;
          text-align:right;
        }
        .c_long{
          display:inline-block;
          width:150px;
          padding-right:10px;
          text-align:right;
        }
        .text{
          width: 200px;
        }
        .c_input{
          width:131px;
          height:40px;
          border:1px solid #dcdfe6;
          border-radius:4px;
          padding-left:5px;
        }
        .c_input::-webkit-input-placeholder {
          color: #dcdfe6;
        }
        .c_input::-ms-input-placeholder {
          color: #dcdfe6;
        }
        .c_input::-moz-input-placeholder {
          color: #dcdfe6;
        }
        .c_search{
          width:90px;
        }
        .c_searchbtn{
          display:inline-block;
          width:34px;
          height:25px;
          margin-left:3px;
          background:#28a4f4;
          color:#fff;
          font-size:12px;
          text-align:center;
          line-height:26px;
          border-radius:6px;
          cursor:pointer;
        }
        .c_checkbox{
          width: 800px;
          height: 90px;
          display:inline-block;
          margin-left:-12px;
        }
        .btn_clear{
          padding:0;
          width:60px;
          height:40px;
          line-height:40px;
        }
        .sbtn_box{
          text-align:left;
          padding-left:82px;
        }
        .c_select{
          width:130px;
        }
        @media screen and (min-width:1466px){
          .c_select{
            width:150px;
          }
          .btn_clear{
            padding:0;
            width:70px;
            height:40px;
            line-height:40px;
          }
          .c_input{
            width:150px;
          }
          .c_search{
            width:100px;
          }
          .c_searchbtn{
            width:42px;
            margin-left:4px;
          }
          .c_tip{
            width:100px;
          }
        }
      }
    }
    .list_tip{
      font-size:14px;
      color:#29a4f2;
      padding:10px 18px;
    }
    .table_box{
      padding:0 18px;
    }
  }
  .dialog_searchbtn{
    display:inline-block;
    width:34px;
    height:25px;
    margin-left:3px;
    background:#28a4f4;
    color:#fff;
    font-size:12px;
    text-align:center;
    line-height:26px;
    border-radius:6px;
    cursor:pointer;
  }
  .el-checkbox__label{
    padding-left:5px;
  }
  .el-checkbox{
    margin-right:10px;
  }
  /deep/.el-input{
    width:150px;
    height:40px;
    border-radius:4px;
    padding-left:5px;
    font-size: 12px;
  }
  /deep/ .el-card__body{
    padding: 0;
    margin-top: 5px;
    display: flex;
    background-color: #FFFFFF;
    border-radius: 5px;
    height: 100px;
  }

</style>
